<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui-iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/css.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper-3.3.1.min.css"/>

</head>

<body>
<div id="app" class="bgfff ov pb90">
    <div id="wraps" class="flex-wrap bgn flex-vertical">
        <header>
            <ul>
                <li class="active">
                    <span>提交资料</span>
                </li>
            </ul>
        </header>
        <div class="reg_ws fixed-header">
            <!--            <div class="step_body">-->
            <!--                <div class="steps">-->
            <!--                    <span class="active">填写资料</span>-->
            <!--                    <span v-if="status==0 || status==1 || status==2" class="active">实名认证</span>-->
            <!--                    <span v-else>实名认证</span>-->
            <!--                    <span v-if="status==2" class="active">已完成</span>-->
            <!--                    <span v-else>已完成</span>-->
            <!--                </div>-->
            <!--                <div class="stepsjd">-->
            <!--                    <img v-if="status==0" src="../../image/step1.png" alt="">-->
            <!--                    <img v-if="status==1" src="../../image/step2.png" alt="">-->
            <!--                    <img v-if="status==2" src="../../image/step3.png" alt="">-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="h15bg"></div>
            <div class="reg_xx" v-if="status==0">
                <div class="reg_xx_item h145" @click="upimg">
                    <div class="reg_xx_iteml">
                        <span>头像上传</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <img :src="img|filtersImg" alt="">
                    </div>
                </div>
                <!--                <div class="reg_xx_item">-->
                <!--                    <div class="reg_xx_iteml">-->
                <!--                        <span>昵称</span>-->
                <!--                    </div>-->
                <!--                    <div class="reg_xx_itemr">-->
                <!--                        <input v-model="nickname" type="text" placeholder="请输入昵称">-->
                <!--                    </div>-->
                <!--                </div>-->
                <div class="reg_xx_item">
                    <div class="reg_xx_iteml">
                        <span>昵称</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <input v-model="nickname2" type="text" placeholder="请输入昵称">
                    </div>
                </div>
                <div class="reg_xx_item" @click="setage">
                    <div class="reg_xx_iteml">
                        <span>年龄</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <!--                        <input v-model="age" type="text" placeholder="请输入年龄">-->

                        <span>{{age}}</span>
                        <i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="reg_xx_item" @click="setsex">
                    <div class="reg_xx_iteml">
                        <span>性别</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <span>{{sex}}</span>
                        <i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="reg_xx_item" @click="getaddress">
                    <div class="reg_xx_iteml">
                        <span>籍贯</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <span>{{province}}{{city}}{{country}}</span>
                        <i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="reg_xx_item" @click="setheight">
                    <div class="reg_xx_iteml">
                        <span>身高</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <span>{{height}}</span><span>CM</span><i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="reg_xx_item" @click="setweight">
                    <div class="reg_xx_iteml">
                        <span>体重</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <span>{{weight}}</span><span>KG</span><i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="reg_xx_item" @click="setjob">
                    <div class="reg_xx_iteml">
                        <span>职业</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <span>{{job}}</span>
                        <i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="my_logout" @click="nextstep">
                    下一步
                </div>
            </div>
            <div class="reg_xx" v-if="status==1">
                <div class="reg_xx_item">
                    <div class="reg_xx_iteml">
                        <span>真实姓名</span>
                    </div>
                    <div class="reg_xx_itemr w100s">
                        <input class="w100s" v-model="nickname" type="text" placeholder="请输入真实姓名">
                    </div>
                </div>
                <div class="reg_xx_item">
                    <div class="reg_xx_iteml">
                        <span>身份证号</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <input v-model="shenfenzheng" type="text" placeholder="请输入身份证号">
                    </div>
                </div>
                <div class="my_logout" @click="nextstep">
                    下一步
                </div>
            </div>
            <div class="reg_xx" v-if="status==2">
                <div class="reg_xx_item" @click="setpurpose">
                    <div class="reg_xx_iteml">
                        <span>约会目的</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <span>{{biotitle}}</span>
                        <i class="icon iconfont icon-right"></i>
                    </div>
                </div>
                <div class="my_logout" @click="nextstep">
                    完成
                </div>
            </div>
        </div>

    </div>
    <div id="box">
        <a>操 作</a>
        <div class="btn" @click="save">
            <button>
                截取图片
            </button>
        </div>
    </div>
</div>
</body>
<script src="../../script/mui.min.js"></script>
<script src="../../script/mui.picker.js"></script>
<script src="../../script/mui.poppicker.js"></script>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function () {
        var main = new Vue({
            el: "#app",
            data: {
                title: '完善资料',
                tel: '',
                status: api.pageParam.id,
                birthday: '1991-01-01',
                address: '',
                province: '北京市',
                city: '北京市',
                country: '东城区',
                img: '',
                imgc: '',
                weight: '30',
                height: '150',
                job: '',
                nickname: '',
                shenfenzheng: '',
                pingfenlist: [
                    {
                        name: '一般',
                        pingfen: 0
                    }, {
                        name: '及格',
                        pingfen: 60
                    }, {
                        name: '良好',
                        pingfen: 80
                    }, {
                        name: '优秀',
                        pingfen: 100
                    }
                ],
                bio: '',
                username: '',
                score: 1,
                age: 18,
                sex: '女',
                sex2: '1',
                yuelist: [],
                biotitle: '',
                joblist: [],
                nickname2: '',
            },
            mounted: function () {
                var that = this;
                api.addEventListener({ //监听安卓返回键
                    name: 'keyback'
                }, function (ret, err) {
                    api.closeWidget() //关闭应用
                });
                mui.plusReady(function () {
                })
                that.getyue()
                that.getjoblist()
            },

            methods: {
                upload: function () {
                },
                submit: function () {
                    var that = this;
                    if (that.img == '') {
                        api.toast({msg: '上传一个头像吧', location: 'middle'});
                        return
                    }
                    if (that.nickname2 == '') {
                        api.toast({msg: '请输入昵称', location: 'middle'});
                        return
                    }
                    if (that.sex == '') {
                        api.toast({msg: '请选择性别', location: 'middle'});
                        return
                    }
                    if (that.height == '') {
                        api.toast({msg: '请选择身高', location: 'middle'});
                        return
                    }
                    if (that.province == '') {
                        api.toast({msg: '请选择城市', location: 'middle'});
                        return
                    }
                    if (that.weight == '') {
                        api.toast({msg: '请选择体重', location: 'middle'});
                        return
                    }
                    if (that.job == '') {
                        api.toast({msg: '请选择职业', location: 'middle'});
                        return
                    }
                    that.onRead()
                },
                // 实名提交验证
                submitsfz: function () {
                    var that = this;
                    // if (that.imgc == '') {
                    //     api.toast({msg: '请上传侧面照', location: 'middle'});
                    //     return
                    // }
                    if (that.nickname == '') {
                        api.toast({msg: '请输入姓名', location: 'middle'});
                        return
                    }
                    if (that.shenfenzheng == '') {
                        api.toast({msg: '请输入身份证号', location: 'middle'});
                        return
                    }
                    // that.onRead()
                    that.shiming()
                },
                submitfinsh: function () {
                    var that = this;
                    if (that.bio == '') {
                        api.toast({msg: '选一个约会目的吧', location: 'middle'});
                        return
                    }
                    // if (that.score == '') {
                    //     api.toast({msg: '给自己评个分吧', location: 'middle'});
                    //     return
                    // }
                    that.finish()
                },
                // 上传缩略图
                onRead: function () {
                    console.log("dddd");
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    console.log(token);

                    var img = ''
                    if (that.status == 0) {
                        img = that.img
                    } else {
                        img = that.imgc
                    }
                    console.log(img);
                    api.ajax({
                            url: ajaxRoute.avatarUpload,
                            method: 'post',
                            data: {
                                values: {
                                    token: token,
                                    imgData: img
                                }
                            }
                        }, function (res, err) {
                            if (res.code == 1) {
                                console.log(JSON.stringify(res));
                                that.img2 = res.msg
                                console.log("缩略图上传");
                                console.log(that.img2)
                                that.sub()
                                // if (that.status == 0) {
                                //     that.sub()
                                // } else if (that.status == 1) {
                                //     that.shiming()
                                // }
                            } else {
                                api.hideProgress();
                                api.toast({msg: err.msg, location: 'middle'});
                            }
                        }
                    )
                },
                // 保存基本信息
                sub: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    var data = {
                        token: token,
                        gender: that.sex2,
                        avatar: that.img2,
                        province: that.province,
                        city: that.city,
                        country: that.country,
                        height: that.height,
                        weight: that.weight,
                        job: that.job,
                        age: that.age,
                        nickname: that.nickname2,
                    }
                    console.log(JSON.stringify(data));
                    $common.request(ajaxRoute.baseinfo, {
                        data: {
                            values: data
                        }
                    }, function (res, err) {
                        // api.hideProgress();
                        // alert(res)
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            that.gohome();
                            // that.status = 1
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                gohome(){
                    api.hideProgress();
                    api.sendEvent({
                        name: 'loginSuccess'
                    });
                    api.setPrefs({
                        key: 'isLogin',
                        value: 'true'
                    });
                    api.closeToWin({
                        name: 'root'
                    });
                    api.sendEvent({
                        name: 'isLogin',
                    });
                    api.closeFrame({
                        name: 'regs'
                    });
                },
                // 获取交友目的列表
                getyue: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    $common.request(ajaxRoute.yue, {
                        data: {
                            values: {
                                token: token,
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            var data = res.data
                            that.yuelist = []
                            Object.keys(data).forEach(function (key) {
                                var datas = {}
                                datas.text = data[key]
                                datas.value = data[key]
                                that.yuelist.push(datas)
                            })
                            console.log(that.yuelist);
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                // 获取工作列表
                getjoblist: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    $common.request(ajaxRoute.job, {
                        data: {
                            values: {
                                token: token,
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            var data = res.data
                            that.joblist = []
                            Object.keys(data).forEach(function (key) {
                                var datas = {}
                                datas.text = data[key]
                                datas.value = data[key]
                                that.joblist.push(datas)
                            })
                            console.log(that.yuelist);
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                // 实名认证
                shiming: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    $common.request(ajaxRoute.verify, {
                        data: {
                            values: {
                                token: token,
                                nickname: that.nickname,
                                shenfenzheng: that.shenfenzheng,
                                thumb: that.img2,
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            that.status = 2
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                // 完善资料结束
                finish: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    console.log(token);
                    $common.request(ajaxRoute.finish, {
                        data: {
                            values: {
                                token: token,
                                bio: that.bio,
                                score: '10'
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            api.hideProgress();
                            api.sendEvent({
                                name: 'loginSuccess'
                            });
                            api.setPrefs({
                                key: 'isLogin',
                                value: 'true'
                            });
                            api.closeToWin({
                                name: 'root'
                            });
                            api.sendEvent({
                                name: 'isLogin',
                            });
                            api.closeFrame({
                                name: 'regs'
                            });
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                upimg: function () {
                    var that = this;
                    api.actionSheet({
                        title: '上传照片',
                        cancelTitle: '取消',
                        buttons: ['拍照', '手机相册']
                    }, function (ret, err) {
                        console.log(JSON.stringify(ret));
                        console.log("照片呢");
                        if (ret) {
                            console.log(ret.buttonIndex);
                            that.getPicture(ret.buttonIndex);
                        }
                    });
                },
                getPicture: function (sourceType) {
                    //相机拍照
                    if (sourceType == 1) {
                        api.getPicture({
                            sourceType: 'camera',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            allowEdit: false,
                            quality: 96,
                            saveToPhotoAlbum: false
                        }, function (ret, err) {
                            // 获取拍照图像并剪辑
                            if (ret) {
                                $api.byId('box').style.visibility = 'visible';
                                var FNImageClip = api.require('FNImageClip');
                                console.log(FNImageClip);
                                FNImageClip.open({
                                    rect: {
                                        x: 0,
                                        y: 0,
                                        w: api.winWidth,
                                        h: api.winHeight - document.querySelector('#box').offsetHeight
                                    },
                                    srcPath: ret.data,
                                    mode: 'image',
                                    style: {
                                        mask: 'rgba(0,0,0,0.75)',
                                        clip: {
                                            w: 200,
                                            h: 200,
                                            x: (api.frameWidth - 200) / 2,
                                            y: (api.frameHeight - 200) / 2,
                                            borderColor: '#0f0',
                                            borderWidth: 1,
                                            appearance: 'rectangle'
                                        }
                                    },
                                }, function (ret, err) {
                                });
                            }
                        });
                    } else if (sourceType == 2) {
                        //手机相册选图片
                        var obj = api.require('UIMediaScanner');
                        obj.open({
                            type: 'picture',
                            column: 4,
                            max: 1,
                            sort: {
                                key: 'time',
                                order: 'desc'
                            },
                            texts: {
                                stateText: '已选择*项',
                                cancelText: '取消',
                                finishText: '完成'
                            },
                            styles: {
                                bg: '#fff',
                                mark: {
                                    icon: '',
                                    position: 'bottom_right',
                                    size: 20
                                },
                                nav: {
                                    bg: '#eee',
                                    stateColor: '#000',
                                    stateSize: 18,
                                    cancleBg: 'rgba(0,0,0,0)',
                                    cancelColor: '#000',
                                    cancelSize: 18,
                                    finishBg: 'rgba(0,0,0,0)',
                                    finishColor: '#000',
                                    finishSize: 18
                                }
                            }
                        }, function (ret) {
                            console.log(JSON.stringify(ret));
                            console.log("相册图片");
                            //将选择的图像进行剪辑
                            if (ret.eventType == 'cancel') {
                            } else if (ret.list.length > 0) {
                                $api.byId('box').style.visibility = 'visible';
                                var FNImageClip = api.require('FNImageClip');
                                obj.transPath({
                                    path: ret.list[0].path
                                }, function(ret, err) {
                                    if (ret) {
                                        FNImageClip.open({
                                            rect: {
                                                x: 0,
                                                y: 0,
                                                w: api.winWidth,
                                                h: api.winHeight - document.querySelector('#box').offsetHeight
                                            },
                                            srcPath: ret.path,
                                            mode: 'image',
                                            style: {
                                                mask: 'rgba(0,0,0,0.75)',
                                                clip: {
                                                    w: 200,
                                                    h: 200,
                                                    x: (api.frameWidth - 200) / 2,
                                                    y: (api.frameHeight - 200) / 2,
                                                    borderColor: '#0f0',
                                                    borderWidth: 0,
                                                    appearance: 'rectangle'
                                                }
                                            },
                                        }, function (ret, err) {
                                        });
                                    } else {
                                    }
                                });

                            }
                        });
                    }
                },
                nub: function (minNum, maxNum) {
                    switch (arguments.length) {
                        case 1:
                            return parseInt(Math.random() * minNum + 1);
                            break;
                        case 2:
                            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
                            break;
                        default:
                            return 0;
                            break;
                    }
                },
                // 弹出交友目的
                setpurpose: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    picker.setData(that.yuelist)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        that.bio = SelectedItem[0].value
                        that.biotitle = SelectedItem[0].text
                    })
                },
                // 设置性别弹出
                setsex: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    picker.setData(
                        [{
                            value: "2",
                            text: "男"
                        }, {
                            value: "1",
                            text: "女"
                        }]
                    )
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.sex2 = SelectedItem[0].value
                        that.sex = SelectedItem[0].text
                    })
                },
                setjob: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    picker.setData(that.joblist)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.job = SelectedItem[0].value
                    })
                },
                // 设置年龄
                setage: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    var ages = []
                    for (var i = 18; i < 100; i++) {
                        var age1 = {}
                        age1.value = i
                        age1.text = i
                        ages.push(age1)
                    }
                    picker.setData(ages)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.age = SelectedItem[0].text
                    })
                },
                // 设置身高
                setheight: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    var ages = []
                    for (var i = 150; i < 251; i++) {
                        var age1 = {}
                        age1.value = i
                        age1.text = i
                        ages.push(age1)
                    }
                    picker.setData(ages)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.height = SelectedItem[0].text
                    })
                },
                // 设置体重
                setweight: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    var ages = []
                    for (var i = 30; i < 150; i++) {
                        var age1 = {}
                        age1.value = i
                        age1.text = i
                        ages.push(age1)
                    }
                    picker.setData(ages)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        console.log(SelectedItem);
                        that.weight = SelectedItem[0].text
                    })
                },
                //保存剪辑图像
                save: function () {
                    var that = this;
                    var FNImageClip = api.require('FNImageClip');
                    var nubs = that.nub(1000, 3000);
                    FNImageClip.save({
                        destPath: 'fs://tx_' + nubs + '.jpg',
                        copyToAlbum: false,
                        quality: 1
                    }, function (ret, err) {
                        $api.byId('box').style.visibility = 'hidden';
                        var tx = ret.destPath;
                        FNImageClip.close();
                        //上传剪辑后的图像到服务器
                        var trans = api.require('trans');
                        trans.decodeImgToBase64({
                            imgPath: ret.destPath
                        }, function (ret, err) {
                            if (ret.status) {
                                if (that.status == 0) {
                                    that.img = "data:image/png;base64," + ret.base64Str
                                } else {
                                    that.imgc = "data:image/png;base64," + ret.base64Str
                                }

                            } else {

                            }
                        });
                    });
                },

                getaddress: function () {
                    var that = this;
                    var picker = new mui.PopPicker({
                        //三级联动
                        layer: 3
                    });
                    picker.setData(cityData3);
                    var adressStr = '';
                    picker.pickers[0].setSelectedIndex(0);
                    picker.pickers[1].setSelectedIndex(0);
                    picker.pickers[2].setSelectedIndex(0);
                    picker.show(function (SelectedItem) {
                        //将选择的省、市、区显示到屏幕上
                        that.province = SelectedItem[0].text
                        that.city = SelectedItem[1].text
                        that.country = SelectedItem[2].text

                    });
                },
                getdate: function () {
                    var that = this;
                    api.openPicker({
                        type: 'date',
                        title: '选择时间'
                    }, function (ret, err) {
                        if (ret) {
                            // alert(JSON.stringify(ret));
                            that.birthday = ret.year + '-' + ret.month + '-' + ret.day
                            console.log(that.birthday);
                        } else {
                            console.log(JSON.stringify(err));
                        }
                    });
                },
                checksex: function (e) {
                    this.sex = e
                    // api.notification();
                    api.notification({
                        sound: 'default'
                    });
                },
                nextstep: function () {
                    this.submit()
                    // if (this.status == 0) {
                    //     this.submit()
                    // } else if (this.status == 1) {
                    //     this.submitsfz()
                    // } else {
                    //     this.submitfinsh()
                    // }
                },
                checkscore: function (e) {
                    this.score = e
                }
            },
            filters: {
                filtersImg: function (img) {
                    if (img == '') {
                        return '../../image/headimg.png'
                    } else if (img.search("base64") != -1) {
                        return img
                    } else {
                        var imgs = ajaxUrl + img
                        return imgs;
                    }
                }
            }
        })
    }
</script>

</html>
